<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
  	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body style="padding-top: 0px">
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    	<h1 class="page-header">课程安排/<span class="text-muted">Course arrangement</span>
    		<button class="layui-btn layui-btn-primary layui-btn-xs" id="refresh">
		  		<i class="layui-icon layui-icon-refresh-3"></i>刷新
		  	</button>
    	</h1>
    	<ol class="breadcrumb">
		  <li><a href="main/course.action">课程管理</a></li>
		  <li><a><%=session.getAttribute("courseName")%></a></li>
		  <li class="active">课程安排</li>
		</ol>
		
		
		<div style="padding: 20px; background-color: #F2F2F2;" id="courseSubListView"></div>
		
		<div style="text-align:right; padding-top: 10px;">
			<button class="layui-btn layui-btn-normal" id="add">添加课程安排</button>
		</div>
    </div>
    
    <div id="detailView" style="display: none; padding-top: 10px;"></div>
    <form class="layui-form" id="createView" lay-filter="createView" action="" style="display: none; padding-top: 20px;"></form>
    <form class="layui-form" id="editView" lay-filter="editView" action="" style="display: none; padding-top: 20px;"></form>
	<div id="editStart" style="display: none;"></div>
	<div id="delStart" style="display: none;"></div>
    
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
    var csidlink;
    
    layui.use(['laytpl', 'layer', 'form'], function(){
    
		var laytpl = layui.laytpl;
		var layer = layui.layer;
		var form = layui.form;
	  
		// 初始化
		overloading();
		
		$('#refresh').on('click', function(){
			overloading();
			layer.msg('刷新完了');
		});
		
		$('#add').on('click', function(){
		  	//添加对象
		  	//
		  	$("#createView")[0].reset();
		  	var cdata = {
				  butclass: ' '
				  ,butfilter: 'createViewSubmit'
				  ,butid: 'createViewSubmit'
				  ,buttext: '立即提交'
				  ,inputclass: ' '
				  ,inputdisabled: ' '
				  ,weeksum: '<%=session.getAttribute("courseWeek")%>'
			};
			var createView = document.getElementById('createView'); 
			var editContent = document.getElementById('editContent');
			laytpl(editContent.innerHTML).render(cdata, function (html) {
				//赋值
				createView.innerHTML = html;
			});
			
			form.val("createView", {
				"ecid": '<%=session.getAttribute("courseId")%>'
				,"ecname": '<%=session.getAttribute("courseName")%>'
			})
			
		  	// 弹窗操作
			layer.open({
				type: 1
				,title :'新安排'
			    ,offset: 'auto' 
			    ,area: ['550px', '480px']
			    ,id: 'create' //防止重复弹出
			    ,content: $("#createView")
			    //,btn: ['确认创建','重置','关闭']
			    ,btnAlign: 'r' //按钮对齐
			    ,shade: 0 //不显示遮罩
			    /* ,yes: function(index, layero){
			      	
				  	
			    },btn2: function(index, layero){
			    	$('#createView').reset()
			    	return false
			  	},btn3: function(index, layero){
			  		layer.close(index);
			  	} */
			});
			
			//监听提交
  		    form.on('submit(createViewSubmit)', function(d){
 		  		var data = d.field;
				 $.ajax(
						{
							type:"post",
							url:"courseSublevel/add.action",
							dataType:"json",
							data:{
								cid: data.ecid
								,week: data.eweek
								,lessonS: data.elessonS
								,lessonE: data.elessonE
								,weekNumber: data.eweekNumber
							},success : function(result){
								if(result.code == 1){
									layer.closeAll();
								}
								layer.msg(result.msg);
								overloading();
							}
						});
					return false;
  		    });
		});
		  
		
		$('#editStart').on('click', function(){
			var edata = {
				  butclass: 'layui-btn-warm'
				  ,butfilter: 'editViewSubmit'
				  ,butid: 'editViewSubmit'
				  ,buttext: '立即更新'
				  ,inputclass: 'layui-disabled'
				  ,inputdisabled: 'disabled'
			};
			var editView = document.getElementById('editView'); 
			var editContent = document.getElementById('editContent');
			laytpl(editContent.innerHTML).render(edata, function (html) {
				//赋值
				 editView.innerHTML = html;
			});
			// 获取值
			$.ajax(
			{
				type:"post",
				url:"courseSublevel/getCourseSublevelById.action",
				dataType:"json",
				data:{
					cidSublevel: csidlink
				},success:function(result){
					// 渲染视图层
					form.val("editView", {
						"ecid": '<%=session.getAttribute("courseId")%>'
						,"ecname": '<%=session.getAttribute("courseName")%>'
						,"eweek": result.week
						,"elessonS": result.lessonS
						,"elessonE": result.lessonE
						,"eweekNumber": result.weekNumber
					})
				}
			});
				 
			// 弹窗操作
			layer.open({
				type: 1
				,title :'编辑'
				,offset: 'auto'
				,area: ['550px', '480px']
				,id: 'edit' //防止重复弹出
				,content: $("#editView")
				,shade: 0 //不显示遮罩
			});
			
			//监听提交
  		    form.on('submit(editViewSubmit)', function(d){
 		  		var data = d.field;
				 $.ajax(
						{
							type:"post",
							url:"courseSublevel/update.action",
							dataType:"json",
							data:{
								cidSublevel: csidlink
								,week: data.eweek
								,lessonS: data.elessonS
								,lessonE: data.elessonE
								,weekNumber: data.eweekNumber
							},success : function(result){
								if(result.code == 1){
									layer.closeAll();
								}
								layer.msg(result.msg);
								overloading();
							}
						});
					return false;
  		    });
		});
		
		$('#delStart').on('click', function(){
			layer.confirm('真的删除行么', function(index){
				layer.close(index);
				//向服务端发送删除指令
				$.ajax(
				{
					type:"post",
					url:"courseSublevel/deleteCourseSublevelById.action",
					dataType:"json",
					data:{
						cidSublevel: csidlink
					},success:function(result){
						layer.msg(result.msg);
						overloading();
					}
				});
			});
		});
		
		function overloading(){
		$.ajax(
			{
				type:"post",
				url:"courseSublevel/findCourseSublevelByPage.action",
				dataType:"json",
				data:{
					cid: '<%=session.getAttribute("courseId")%>'
					,page: 1
					,limit: 10
				},success:function(result){
					var view = document.getElementById('courseSubListView');
					laytpl(courseSubListContent.innerHTML).render(result.data, function(html){
					  view.innerHTML = html;
					});
				}
			});
		}
		
		
	}); 
	
	function edit(csid){
		csidlink = csid;
		$('#editStart').trigger('click');
	}
	
	function del(csid){
		csidlink = csid;
		$('#delStart').trigger('click');
	}
	
	
    </script>
    <script type="text/html" id="courseSubListContent">
		<div class="layui-row layui-col-space15">
		  {{#  layui.each(d, function(index, item){ }}
		    <div class="layui-col-md3">
		      <div class="layui-card">
		        <div class="layui-card-header">{{ item.cname }}—{{ index+1 }} <i class="layui-icon layui-icon-tips" style="position: absolute;right: 15px;"></i></div>
		        <div class="layui-card-body">
					<p>标识ID：{{ item.cidSublevel }}</p>
					<p>隶属课程：{{ item.cname }}</p>
					<p>所在星期：星期{{ item.week }}</p>
					<p>节数：{{ item.lessonS }}-{{ item.lessonE }}</p>
					<p>周次：{{ item.weekNumber }}</p>
					<div style="text-align:right; margin-top: 30px;">
						<button class="layui-btn layui-btn-sm" type="button" onclick="edit({{ item.cidSublevel }})">编辑</button>
						<button class="layui-btn layui-btn-sm layui-btn-danger" type="button" onclick="del({{ item.cidSublevel }})">删除</button>
					</div>
		        </div>
		      </div>
		    </div>
		  {{#  }); }}
  		  {{#  if(d.length === 0){ }}
    		无数据
  		  {{#  } }}
		</div> 
	</script>
	<script type="text/html" id="editContent">
	  
	  <div class="layui-form-item">
	      <div class="layui-inline">
	      	<label class="layui-form-label">隶属</label>
	      	<div class="layui-input-inline" style="width:160px">
	      		<input type="text" name="ecid" id="ecid" lay-verify="required|number" autocomplete="off" class="layui-input layui-disabled" disabled>
	      	</div>
	      </div>
	      <div class="layui-inline">
	      	<label class="layui-form-label">名称</label>
	      	<div class="layui-input-inline" style="width:160px">
	      		<input type="text" name="ecname" id="ecname" lay-verify="required" autocomplete="off" class="layui-input layui-disabled" disabled>
	      	</div>
	      </div>
	  </div>

	  <div class="layui-form-item">
		 <label class="layui-form-label">星期</label>
	     <div class="layui-input-inline" style="width:225px">
			<input type="text" name="eweek" placeholder="从0到6中填一个数字" lay-verify="required|number" autocomplete="off" class="layui-input">
	     </div>
		 <div class="layui-form-mid layui-word-aux">适用的星期，0代表星期天</div>
	  </div>
		
	  <div class="layui-form-item">
		 <div class="layui-inline">
		  	<label class="layui-form-label">节数</label>
			<div class="layui-input-inline" style="width:100px">
	      		<input type="text" name="elessonS" placeholder="开始" lay-verify="required|number" autocomplete="off" class="layui-input">
	      	</div>
			<div class="layui-form-mid">-</div>
			<div class="layui-input-inline" style="width:100px">
	      		<input type="text" name="elessonE" placeholder="结束" lay-verify="required|number" autocomplete="off" class="layui-input">
	      	</div>
		  </div>
	  </div>
		
	 <div class="layui-form-item">
		  	<label class="layui-form-label">周次</label>
	      	<div class="layui-input-inline" style="width:425px;">
				<input type="text" name="eweekNumber" lay-verify="required" placeholder="例：1-1,4-10" class="layui-input">
	      	</div>
			<div class="layui-form-mid layui-word-aux">输入“起始周-结束周”，多次判断请用英文逗号分隔</div>
	  </div>

	  <!--
	  <div class="layui-form-item">
			<label class="layui-form-label"> </label>
	      	<div class="layui-btn-group">
				{{# for (var i=1;i<=d.weeksum;i++){ }}
					<input type="button" value="{{ i}}" autocomplete="off" class="layui-btn layui-btn-primary layui-btn-sm">
				{{# } }}
	      	</div>
	  </div>-->

	  <div class="layui-form-item" style="text-align:center; margin-top: 80px;">
	  	<button class="layui-btn {{d.butclass}}" lay-submit="" lay-filter="{{d.butfilter}}" id="{{d.butid}}">{{d.buttext}}</button>
	  	<button class="layui-btn layui-btn-primary" type="reset">重置</button>
	  	<button class="layui-btn layui-btn-primary" type="button" onclick="layer.closeAll()">关闭</button>
	  </div>
	</script>
  </body>
</html>
